<template>
  <div>
    <div class="one">
      <div class="nav">
        <span class="basic">基础信息</span>
      </div>
      <div class="content">
        <el-row>
          <el-col :span="12">
            <el-form-item label="进仓库编码:" style="margin-left: 70px">
              <el-input
                v-model="form.code"
                autocomplete="off"
                placeholder="请输入"
                style="width: 250px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="提单号:">
              <el-input
                v-model="form.bill"
                autocomplete="off"
                placeholder="请输入"
                style="width: 250px"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </div>

    <div class="two">
      <div class="nav">
        <span class="basic">货物信息</span>
      </div>
      <div class="content">
        <el-row>
          <el-col :span="12">
            <el-form-item label="起运港:" style="margin-left: 70px">
              <el-input
                v-model="form.portDeparture"
                autocomplete="off"
                placeholder="默认SHAGNHAI"
                style="width: 250px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="货物包装:">
              <el-input
                v-model="form.packaging"
                autocomplete="off"
                placeholder="默认托盘，可修改"
                style="width: 250px"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="目的港:" style="margin-left: 70px">
              <el-input
                v-model="form.destinationPort"
                autocomplete="off"
                placeholder="根据货代自动填充"
                style="width: 250px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="货物件数:">
              <el-input
                v-model="form.counts"
                autocomplete="off"
                placeholder="请输入"
                style="width: 250px"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="预计开航日期:" style="margin-left: 70px">
              <el-date-picker
                v-model="form.departureDate"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                type="date"
                placeholder="请选择"
                style="width: 250px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="货物毛重（kg）:">
              <el-input
                v-model="form.gross"
                autocomplete="off"
                placeholder="请输入"
                style="width: 250px"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="截关时间:" style="margin-left: 70px">
              <el-date-picker
                v-model="form.cutoffDate"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                type="date"
                placeholder="请选择"
                style="width: 250px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="货物体积（kg）:">
              <el-input
                v-model="form.volume"
                autocomplete="off"
                placeholder="请输入"
                style="width: 250px"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </div>

    <div class="three">
      <div class="nav">
        <span class="basic">进仓信息</span>
      </div>
      <div class="content">
        <el-row>
          <el-col :span="12">
            <el-form-item label="最晚进仓时间:" style="margin-left: 70px">
              <el-date-picker
                v-model="form.lastTime"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                type="date"
                placeholder="请选择"
                style="width: 250px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="仓库名称:">
              <el-input
                v-model="form.name"
                autocomplete="off"
                placeholder="默认托盘，可修改"
                style="width: 250px"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="仓库营业性质:" style="margin-left: 70px">
              <el-input
                v-model="form.business"
                autocomplete="off"
                placeholder="默认24小时营业，节假日有人值班"
                style="width: 250px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="进仓库地址:">
              <el-input
                v-model="form.entryAdress"
                autocomplete="off"
                placeholder="默认上海市奉贤区"
                style="width: 250px"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item
              label="问路以及进仓库货物查询电话:"
              style="margin-left: 70px"
            >
              <el-input
                v-model="form.searchMobile"
                autocomplete="off"
                placeholder="请输入"
                style="width: 250px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="仓库联系人:">
              <el-input
                v-model="form.contacts"
                autocomplete="off"
                placeholder="请输入"
                style="width: 250px"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="进仓库遇到问题电话:" style="margin-left: 70px">
              <el-input
                v-model="form.mobile"
                autocomplete="off"
                placeholder="请输入"
                style="width: 250px"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="explain">
      <p>
        说明:
        1.以上货物包装均符合出口包装，包装类型包含但不限于角铁包装，以及胶合木板包装和带熏蒸标识的
        原木托盘包装。
      </p>
      <p>
        2.若产品包装时，有部分是裸露在外部,请仓库先行安排收货，并联系对应的货运公司提供裸装包含。
      </p>
      <p>
        3.公司所有产品均为机械类产品，不含任何液体，不含任何油，不含磁，不含任何危险成分等普货。
      </p>
      <p>
        4.货物存放在室内，不得存放在室外，以免产品损失，我司保留索赔的权利。
      </p>
      <p>
        5.所有在叉车搬运均需要小心，以免破损货物或者托盘。若产品有掉落或者漏，请及时和我们联系。
        投诉以及建议电话:17317601762
      </p>
    </div>
    <div class="dialog-footer">
      <el-button type="primary" class="butt" @click="save"> 生成 </el-button>
      <el-button class="butt">取消</el-button>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { addWarehouse } from "@/api/forworder/forworder.js";
import { ElMessage } from "element-plus";
import { useRoute, useRouter } from "vue-router";
const router = useRouter();
const route = useRoute(); // 获取路由对象
const orderid = route.query.orderid;
const form = ref({
  code: "",
  bill: "",
  lastTime: "",
  name: "",
  business: "",
  entryAdress: "",
  searchMobile: "",
  contacts: "",
  mobile: "",
  portDeparture: "",
  packaging: "",
  destinationPort: "",
  counts: "",
  departureDate: "",
  gross: "",
  cutoffDate: "",
  volume: "",
  orderid: orderid
});
async function save() {
  let res = await addWarehouse(form.value);
  if (res.code == 200) {
    ElMessage({
      message: "生成成功",
      type: "success"
    });
    router.push({
      path: "/forwarder/Document"
    });
  }
}
</script>
<style scoped>
.root {
  width: 95vw;
  background-color: #fff;
  border-radius: 5px;
}
.nav {
  background-color: #efefef;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #c1c1c1;
}
.one,
.two,
.three {
  background-color: #ffffff;
  border: 1px solid #c1c1c1;
}
.basic {
  margin-left: 30px;
}
.content {
  position: relative;
  padding-top: 30px;
}
.content button {
  color: #fff;
  width: 150px;
  height: 50px;
  background-color: #356d9e;
  position: absolute;
  right: 100px;
  bottom: 50px;
}
.two,
.three {
  margin-top: 30px;
}
.dialog-footer {
  display: flex;
  justify-content: center;
  background-color: #ffffff;
  height: 60px;
}
.butt {
  margin-top: 15px;
}
.explain {
  padding-top: 20px;
  padding-bottom: 20px;
}
</style>
